<!-- 相当于给模板定义一个名字 define end 成对出现 -->
{{ define "public/page_header.html" }}
    <div class="pub-area">
        <div class="cont-header">
            <div class="flex-div">
                <div>
                    <img class="logo-img" src="/static/images/tianmao.jpg" alt="">
                </div>
                <div>
                    <h2 class="title">
                        天猫商城
                    </h2>
                </div>
            </div>
            <div class="mg-div">
                <span class="it-cent">首页</span>
                <span class="it-cent">商品分类</span>
                <span class="it-cent">天猫国际</span>
                <span class="it-cent">搜索商品</span>
                <span class="it-cent">商家中心</span>
            </div>
            <div>
                <span class="it-act">促销活动快速入口</span>
            </div>
        </div>
    </div>

    <style>
        .cont-header{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            color: rgb(5, 159, 249);
            .flex-div{
                display: flex;
                justify-content: flex-start;
            }
            .mg-div{
                margin: 0 100px 0;
            }
            .logo-img{
                width: 80px;
                height: 60px;
                margin-right: 10px;
            }
            .it-cent{
                margin-right: 20px;
                color: chocolate;
                font-weight: bold;
            }
            .it-act{
                color: rgb(60, 76, 219);
            }
        }
    </style>
{{ end }}